<script lang="ts" setup>
import { Card } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';

const props = withDefaults(
  defineProps<{
    formConfig?: Record<string, any>;
    schema: any[];
  }>(),
  {
    formConfig: {},
  },
);

const emit = defineEmits<{
  (e: 'submit', values: any): void;
  (e: 'reset'): void;
}>();

function onSubmit(values: Record<string, any>) {
  emit('submit', values);
}

const [QueryForm, formApi] = useVbenForm({
  collapsed: false,
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleSubmit: onSubmit,
  resetButtonOptions: {
    onClick: () => {
      formApi.resetForm();
      emit('reset'); // 通知父组件
    },
  },
  layout: 'horizontal',
  showCollapseButton: true,
  schema: props.schema,
  submitButtonOptions: {
    content: '查询',
  },
  wrapperClass: 'grid-cols-1 md:grid-cols-3',
  ...props.formConfig,
});

defineExpose({
  getValues: formApi.getValues,
  resetForm: formApi.resetForm,
  formApi,
});
</script>

<template>
  <Card>
    <QueryForm>
      <!-- 重置按钮前 -->
      <template #reset-before>
        <slot name="reset-before"></slot>
      </template>

      <!-- 查询按钮前 -->
      <template #submit-before>
        <slot name="submit-before"></slot>
      </template>

      <!-- 展开按钮前 -->
      <template #expand-before>
        <slot name="expand-before"></slot>
      </template>

      <!-- 展开按钮后 -->
      <template #expand-after>
        <slot name="expand-after"></slot>
      </template>
    </QueryForm>
  </Card>
</template>
